<template>
  <a-modal :title="title" :width="800" :visible="visible" :confirm-loading="confirmLoading" cancel-text="关闭" @ok="submit" @cancel="closeModal">
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="年级">
          <a-select placeholder="全部类型" v-decorator="['grade', validatorRules.grade ]">
            <a-select-option :value="item.val" v-for="(item, index) in gradeUl" :key="index">{{ item.name }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="医院模块">
          <a-select placeholder="全部类型" v-decorator="['module', validatorRules.module ]">
            <a-select-option :value="item.val" v-for="(item, index) in moduleUl" :key="index">{{ item.name }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="医院纬度">
          <a-select placeholder="全部类型" v-decorator="['dimension', validatorRules.dimension ]">
            <a-select-option :value="item.val" v-for="(item, index) in dimensionUl" :key="index">{{ item.name }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="问题名称">
          <a-input v-decorator="['name', validatorRules.name ]" placeholder="请输入问题名称" />
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="答案1">
          <a-input v-decorator="['a1', {} ]" placeholder="请输入答案1" />
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="答案分值">
          <a-input-number
            style="width:200px"
            placeholder="输入答案分值"
            :min="0"
            :max="99"
            v-decorator="[ 's1', {initialValue: 0} ]"
          />
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="答案2">
          <a-input v-decorator="['a2', {} ]" placeholder="请输入答案2" />
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="答案分值">
          <a-input-number
            style="width:200px"
            placeholder="输入答案分值"
            :min="0"
            :max="99"
            v-decorator="[ 's2', {initialValue: 0} ]"
          />
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="答案3">
          <a-input v-decorator="['a3', {} ]" placeholder="请输入答案3" />
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="答案分值">
          <a-input-number
            style="width:200px"
            placeholder="输入答案分值"
            :min="0"
            :max="99"
            v-decorator="[ 's3', {initialValue: 0} ]"
          />
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="答案4">
          <a-input v-decorator="['a4', {} ]" placeholder="请输入答案4" />
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="答案分值">
          <a-input-number
            style="width:200px"
            placeholder="输入答案分值"
            :min="0"
            :max="99"
            v-decorator="[ 's4', {initialValue: 0} ]"
          />
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="答案5">
          <a-input v-decorator="['a5', {} ]" placeholder="请输入答案5" />
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="答案分值">
          <a-input-number
            style="width:200px"
            placeholder="输入答案分值"
            :min="0"
            :max="99"
            v-decorator="[ 's5', {initialValue: 0} ]"
          />
        </a-form-item>
        <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="顺序">
          <a-input-number
            style="width:200px"
            placeholder="数字越小，越靠前（1-99）"
            :min="1"
            :max="99"
            v-decorator="[ 'sort', validatorRules.sort]"
          />
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import ApiTree from '@/api/evaluation/questionsList';
import { Slime } from '@/mixins/slime';
import { evaFiltersMixin } from "@/mixins/evaMixin";
export default {
  name: 'questionsListModal',
  data() {
    return {
      title: '编辑',
      form: this.$form.createForm(this),
      model: {},
      validatorRules: {
        grade: { rules: [{ required: true, message: '请输入内容!' }] },
        module: { rules: [{ required: true, message: '请输入内容!' }] },
        dimension: { rules: [{ required: true, message: '请输入内容!' }] },
        name: { rules: [{ required: true, message: '请输入内容!' }] },
        sort: { rules: [{ required: true, message: '请输入内容!' }], initialValue: 1,},
      },
      id: 0,
    };
  },
  mixins: [Slime, evaFiltersMixin],
  methods: {
    // 增
    crudCreate() {
      this.crudUpdate({});
    },
    // 改
    crudUpdate(record) {
      this.form.resetFields(); //重新设置领域
      this.visible = true;
      if(!record.id){
        return false
      }
      ApiTree.getDetail(record.id)
        .then((res) => {
          let data = res.result;
          this.id = data.id;
          this.form.setFieldsValue({
            grade: data.grade,
            module: data.module,
            dimension: data.dimension,
            name: data.name,
            a1: data.a1,
            s1: data.s1,
            a2: data.a2,
            s2: data.s2,
            a3: data.a3,
            s3: data.s3,
            a4: data.a4,
            s4: data.s4,
            a5: data.a5,
            s5: data.s5,
            sort: data.sort,
          });
        })
        .finally(() => {});
    },
    // 提交
    submit() {
      const that = this;
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true;
          let param = values
          if (!that.id) {
            that.submitCreate(param);
          } else {
            param = { ...param, id: that.id };
            that.submitUpdate(param);
          }
        }
      });
    },
    // 提交 增
    submitCreate(param) {
      const that = this;
      ApiTree.getAdd(param)
        .then((res) => {
          that.$message.success('新增成功');
        })
        .finally(() => {
          that.closeModal();
        });
    },
    // 提交 改
    submitUpdate(param) {
      const that = this;
      ApiTree.getUpdate(param)
        .then((res) => {
          that.$message.success('编辑成功');
        })
        .finally(() => {
          that.closeModal();
        });
    },
    // 弹窗-关闭
    closeModal() {
      this.confirmLoading = false;
      this.visible = false;
      this.id = null
      this.form.resetFields();
      this.$emit('closeModal');
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>